﻿<template>
  <div class="app-container">
    <sticky :z-index="10" :class-name="'sub-navbar draft'">
      <el-button
        v-loading="loading"
        style="margin-left: 10px;"
        type="primary"
        @click="selectCommit"
      >确定</el-button>
    </sticky>
    <div class="filter-container" style="margin-top:20px;">
      <el-input
        v-model="listQuery.name"
        placeholder="名称"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      style="width: 100%"
      :data="list"
      @sort-change="sortChange"
    >
      <el-table-column label="选择" width="55">
        <template slot-scope="scope">
          <el-radio v-model="selectedObject" :label="scope.row">&nbsp;</el-radio>
        </template>
      </el-table-column>
      <el-table-column label="编号" width="110px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" width="110px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getListPaged } from '@/api/bdms/clientCategory'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
// import { checkPhone } from '@/utils/validate'
import Sticky from '@/components/Sticky' // 粘性header组件

export default {
  name: 'ClientCategory',
  components: { Pagination, Sticky },
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        name: undefined,
        sorting: 'creationTime'
      },
      dialogFormVisible: false,
      downloadLoading: false,
      loading: false,
      selectedObject: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      const params = {
        filter: this.listQuery.name,
        sorting: this.listQuery.sorting,
        skipCount: (this.listQuery.page - 1) * this.listQuery.limit,
        maxResultCount: this.listQuery.limit
      }
      getListPaged(params).then(response => {
        this.list = response.data.items
        this.total = response.data.totalCount
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    sortChange(data) {
      const { prop, order } = data
      if (prop === 'creationTime') {
        this.sortByCreationTime(order)
      }
    },
    sortByCreationTime(order) {
      if (order === 'ascending') {
        this.listQuery.sorting = 'creationTime'
      } else {
        this.listQuery.sorting = 'creationTime desc'
      }
      this.handleFilter()
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}`
        ? 'ascending'
        : sort === `-${key}`
          ? 'descending'
          : ''
    },
    selectCommit() {
      this.$emit('selected', this.selectedObject)
    }
  }
}
</script>
